<template>
  <div id="app" v-resize="onResize">
    <router-view />
    <a
      href="https://beian.miit.gov.cn/#/Integrated/index"
      target="_blank"
      id="copyright"
    >
      闽ICP备17000171号
    </a>
  </div>
</template>
<script>
import wx from "weixin-js-sdk";
import resize from "@/directives/resize";
import { isProd } from "@/config";
import { isWechat } from "@/utils/validate";
import { randomStr } from "@/utils";

export default {
  directives: {
    resize,
  },
  data() {
    return {
      vConsole: null,
    };
  },
  watch: {
    "$route.query": {
      handler(v) {
        console.log("watch");
        console.log("$route.query", v);
        this.$cache.remove("mpToken");
        if (v.mpToken) {
          this.$cache.set("mpToken", v.mpToken);
        }
        if (v.debug == 1) {
          this.initConsole();
        }
        this.changeClickId(v);
      },
    },
  },
  created() {
    console.log("created");

    this.initConsole();
    this.$cache.remove("click_id");
    this.getReferrer();
    this.initWxSdk();
  },
  methods: {
    initConsole() {
      if (this.vConsole) {
        this.vConsole.destroy();
      }
      // eslint-disable-next-line no-undef
      if (!isProd && !this.vConsole && window.VConsole) {
        // eslint-disable-next-line
        this.vConsole = new VConsole();
      }
    },
    onResize() {
      let fontSize = this.getStyle(document.documentElement, "font-size");
      if (Number(fontSize.replace("px", "")) > 45) {
        document.documentElement.style.fontSize = "45px";
      }
    },
    initWxSdk() {
      if (!isWechat) return;
      document.addEventListener("UniAppJSBridgeReady", async () => {
        const uniEnv = this.$uni.env;
        if (uniEnv.miniprogram) return;
        let config = {
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: "wxca5fb573b5d212c9", // 必填，公众号的唯一标识
          timestamp: Date.now(), // 必填，生成签名的时间戳
          nonceStr: randomStr(16), // 必填，生成签名的随机串
          signature: "331972007cc975c82cb8edaa9d2709be", // 必填，签名
          jsApiList: ["hideOptionMenu", "showOptionMenu"], // 必填，需要使用的JS接口列表
        };
        const result = await this.$api.wxConfig().catch(() => ({}));
        result.app_id && (config.appId = result.app_id);
        result.secret && (config.signature = result.secret);
        wx?.config?.(config);
        wx?.ready?.((res) => {
          // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
          console.log("ready", res);
        });
        wx?.error?.((res) => {
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
          if (res.errMsg == "config:fail") {
            console.log("初始化config失败");
          }
        });
      });
    },
  },
};
</script>
<style lang="scss">
#app {
  z-index: 1;
  &::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f5f5f5;
    z-index: -1;
  }
}
</style>
